@import "../_variables";

.effeckt-tabs-wrap {
	position: relative;

	ul.effeckt-tabs {
		overflow: hidden; // used to be clearfix
	}

	.effeckt-tabs-container {
		position: relative;
		transition: all $effeckt-tabs-transition-duration ease-in-out;

		.effeckt-tab-content {
			position: absolute;
			transition: all $effeckt-tabs-transition-duration/2 ease-in-out;
		}
	}
	
	
	&[data-effeckt-type='scale'] {
		.effeckt-tab-content {
			&.effeckt-hide {
				transform: scale(0.9);
				opacity:0;
			}
			&.effeckt-show {
				transform: scale(1);
				transition-delay: 0.3s;
				opacity: 1;
			}
		}
	}

	&[data-effeckt-type='scale-up'] {
		.effeckt-tab-content {
			&.effeckt-hide {
				transform: scale(1.1);
				opacity:0;
			}
			&.effeckt-show {
				transform: scale(1);
				transition-delay: 0.3s;
				opacity: 1;
			}
		}
	}

	&[data-effeckt-type='slide-left'] {
		.effeckt-tabs-container{
			overflow:hidden;
			.effeckt-tab-content {
				&.effeckt-hide {
					transform: translateX(-100%);
					opacity:0;
				}
				&.effeckt-show {
					transform: translateX(0%);
					transition-delay: 0.3s;
					opacity: 1;
				}
			}
		}
	}

	&[data-effeckt-type='slide-right'] {
		.effeckt-tabs-container{
			overflow:hidden;
			.effeckt-tab-content {
				&.effeckt-hide {
					transform: translateX(100%);
					opacity:0;
				}
				&.effeckt-show {
					transform: translateX(0%);
					transition-delay: 0.3s;
					opacity: 1;
				}
			}
		}
	}

	&[data-effeckt-type='slide-up'] {
		.effeckt-tabs-container{
			overflow:hidden;
			.effeckt-tab-content {
				&.effeckt-hide {
					transform: translateY(-100%);
					opacity:0;
				}
				&.effeckt-show {
					transform: translateY(0%);
					transition-delay: 0.3s;
					opacity: 1;
				}
			}
		}
	}

	&[data-effeckt-type='slide-down'] {
		.effeckt-tabs-container{
			overflow:hidden;
			.effeckt-tab-content {
				&.effeckt-hide {
					transform: translateY(100%);
					opacity:0;
				}
				&.effeckt-show {
					transform: translateX(0%);
					transition-delay: 0.3s;
					opacity: 1;
				}
			}
		}
	}

	&[data-effeckt-type='flip'] {
		.effeckt-tabs-container{
			overflow:hidden;
			.effeckt-tab-content {
				&.effeckt-hide {
					transform: rotateY(-90deg) scale(1.1);
					opacity:0;
				}
				&.effeckt-show {
					transform: rotateY(0deg) scale(1);
					transition-delay: 0.3s;
					opacity: 1;
				}
			}
		}
	}
}